<template>
    <div class="player" style="overflow-y: hidden;">     
        <div class="header">
            <div class="menu">
                <div class="menu-item" :class="{ active: activeTab === 'playlist' }" @click="setActiveTab('playlist')">播放列表</div>
                <div class="menu-item" :class="{ active: activeTab === 'favorite' }" @click="setActiveTab('favorite')">我的收藏</div>
                <div class="menu-item" :class="{ active: activeTab === 'customPlaylist' }" @click="setActiveTab('customPlaylist')">自建歌单</div>
                <div class="menu-item" :class="{ active: activeTab === 'purchased' }" @click="setActiveTab('purchased')">已购歌曲</div>
            </div>
        </div>
        <div class="content">
            <component :is="currentComponent" />
        </div>
        <Words />
    </div>
    <MusicPlayer />
</template>

<script setup lang="ts">
import { ref, nextTick, computed, onMounted, onBeforeUnmount, type Ref, type Component } from 'vue'
import Playlist from '@/components/player/Player/Playlist.vue'
import Favorite from '@/components/player/Player/Favorite.vue'
import CustomPlaylist from '@/components/player/Player/CustomPlaylist.vue'
import Purchased from '@/components/player/Player/Purchased.vue'
import MusicPlayer from './Player/MusicPlayer.vue'
import Words from './Player/Words.vue'
// 定义标签类型
type TabType = 'playlist' | 'favorite' | 'customPlaylist' | 'purchased'

const activeTab: Ref<TabType> = ref('playlist') // 默认选中播放列表

// 组件映射
const componentMap: Record<TabType, Component> = {
  playlist: Playlist,
  favorite: Favorite,
  customPlaylist: CustomPlaylist,
  purchased: Purchased
}

// 计算当前组件
const currentComponent = computed(() => componentMap[activeTab.value])

// 更新滑动横线位置
const updateSlider = (): void => {
  nextTick(() => {
    const menu: HTMLElement | null = document.querySelector('.player .menu')
    const activeItem: HTMLElement | null = document.querySelector('.player .menu-item.active')
    
    if (activeItem && menu) {
      const menuRect: DOMRect = menu.getBoundingClientRect()
      const itemRect: DOMRect = activeItem.getBoundingClientRect()
      const offsetLeft: number = itemRect.left - menuRect.left
      const itemWidth: number = itemRect.width
      
      // 更新CSS变量来控制横线位置和宽度
      menu.style.setProperty('--slider-left', `${offsetLeft + itemWidth * 0.1}px`)
      menu.style.setProperty('--slider-width', `${itemWidth * 0.8}px`)
    }
  })
}

// 监听activeTab变化
const setActiveTab = (tab: TabType): void => {
  activeTab.value = tab
  updateSlider()
}

// 组件挂载后初始化横线位置
onMounted(() => {
  updateSlider()
  document.body.style.overflowY = 'hidden'
})

// 组件卸载前恢复滚动条
onBeforeUnmount(() => {
  document.body.style.overflowY = ''
})


</script>

<style scoped>
.player {
    width: 1200px;
    height: 530px;
    background-color: inherit;
    margin-left: 100px;
    margin-top: 50px;
    position: relative;
}

.header {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 20px;
    padding-bottom: 0px;
}

.menu {
    display: flex;
    gap: 30px;
    position: relative;
    margin-left: 50px;
}

.menu::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: var(--slider-left, 0);
    width: var(--slider-width, 0);
    height: 2px;
    background-color: #ffffff;
    transition: all 0.3s ease;
}

.menu-item {
    color: #999;
    font-size: 16px;
    cursor: pointer;
    padding: 8px 12px;
    position: relative;
    transition: color 0.3s ease;
}

.menu-item:hover {
    color: #ffffff;
}

.menu-item.active {
    color: #ffffff;
    font-weight: bold;
}

.content {
    flex: 1;
    color: #ffffff;
}

/* Words 组件定位到右上角 */
:deep(.song-words) {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 10;
}

</style>